<template>
  <div
    class="layadmin-user-login layadmin-user-display-show"
    id="LAY-user-login"
  >
    <div class="layadmin-user-login-main">
      <div class="layadmin-user-login-box layadmin-user-login-header">
        <h2>疯哥传奇中控系统</h2>
      </div>
      <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
        <div class="layui-form-item">
          <label
            class="layadmin-user-login-icon layui-icon layui-icon-username"
            for="LAY-user-login-username"
          ></label>
          <input
            type="text"
            name="username"
            v-model="form.username"
            id="LAY-user-login-username"
            placeholder="用户名"
            class="layui-input"
          />
        </div>
        <div class="layui-form-item">
          <label
            class="layadmin-user-login-icon layui-icon layui-icon-password"
            for="LAY-user-login-password"
          ></label>
          <input
            type="password"
            name="password"
            v-model="form.password"
            id="LAY-user-login-password"
            placeholder="密码"
            class="layui-input"
          />
        </div>

        <div class="layui-form-item" style="margin-bottom: 20px"></div>
        <div class="layui-form-item">
          <button
            class="layui-btn layui-btn-fluid"
            id="LAY-user-login-submit"
            @click="onSubmit"
            lay-filter="LAY-user-login-submit"
          >
            登 入
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { mapMutations } from "vuex";

export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    ...mapMutations(["SET_USER"]),
    onSubmit() {
      localStorage.clear();
      var T = this;
      var params = T.form;
      let _this = this
      axios
        .post(T.GLOBAL.url + "/login", {
          用户账号: params.username,
          用户密码: params.password,
        })
        .then(function (obj) {
          if (obj.data.code !== 1) {
            T.$XModal.message({ content: obj.data.message, status: "error" });
          } else if (obj.data.code == 1) {
            localStorage.setItem("token", obj.data.token);
            // debugger
            _this.SET_USER( {
              username: params.username,
              user_key:  obj.data.level
            })
            T.$router.push("/zhgl"); //跳转到账号列表里面
            T.$XModal.message({ content: obj.data.message, status: "success" });
          }
        });
    },
  },

};
</script>

<style acoped>
.login-form {
  width: 350px;
  margin: 160px auto; /* 上下间距160px，左右自动居中*/
  background-color: rgb(255, 255, 255); /* 透明背景色 */
  padding: 30px;
  border-radius: 20px; /* 圆角 */
}

/* 背景 */
.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  /*background: url("../../assets/login.png");*/
}

/* 标题 */
.login-title {
  color: #303133;
  text-align: center;
}
</style>

<style >
body {
  font-family: "微软雅黑"; /*  设置字体 */
  margin: 0px auto; /* 去除上下的边距*/
}
/** layuiAdmin.pro-v1.2.1 LPPL License By http://www.layui.com/admin/ */
#LAY_app,
body,
html {
  height: 100%;
}
.layui-layout-body {
  overflow: auto;
}
#LAY-user-login,
.layadmin-user-display-show {
  display: block !important;
}
.layadmin-user-login {
  position: relative;
  left: 0;
  top: 0;
  padding: 110px 0;
  min-height: 100%;
  box-sizing: border-box;
}
.layadmin-user-login-main {
  width: 375px;
  margin: 0 auto;
  box-sizing: border-box;
}
.layadmin-user-login-box {
  padding: 20px;
}
.layadmin-user-login-header {
  text-align: center;
}
.layadmin-user-login-header h2 {
  margin-bottom: 10px;
  font-weight: 300;
  font-size: 30px;
  color: #000;
}
.layadmin-user-login-header p {
  font-weight: 300;
  color: #999;
}
.layadmin-user-login-body .layui-form-item {
  position: relative;
}
.layadmin-user-login-icon {
  position: absolute;
  left: 1px;
  top: 1px;
  width: 38px;
  line-height: 36px;
  text-align: center;
  color: #d2d2d2;
}
.layadmin-user-login-body .layui-form-item .layui-input {
  padding-left: 38px;
}
.layadmin-user-login-codeimg {
  max-height: 38px;
  width: 100%;
  cursor: pointer;
  box-sizing: border-box;
}
.layadmin-user-login-other {
  position: relative;
  font-size: 0;
  line-height: 38px;
  padding-top: 20px;
}
.layadmin-user-login-other > * {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  font-size: 14px;
}
.layadmin-user-login-other .layui-icon {
  position: relative;
  top: 2px;
  font-size: 26px;
}
.layadmin-user-login-other a:hover {
  opacity: 0.8;
}
.layadmin-user-jump-change {
  float: right;
}
.layadmin-user-login-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  line-height: 30px;
  padding: 20px;
  text-align: center;
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.5);
}
.layadmin-user-login-footer span {
  padding: 0 5px;
}
.layadmin-user-login-footer a {
  padding: 0 5px;
  color: rgba(0, 0, 0, 0.5);
}
.layadmin-user-login-footer a:hover {
  color: rgba(0, 0, 0, 1);
}
.layadmin-user-login-main[bgimg] {
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}
.ladmin-user-login-theme {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}
.ladmin-user-login-theme ul {
  display: inline-block;
  padding: 5px;
  background-color: #fff;
}
.ladmin-user-login-theme ul li {
  display: inline-block;
  vertical-align: top;
  width: 64px;
  height: 43px;
  cursor: pointer;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  background-color: #f2f2f2;
}
.ladmin-user-login-theme ul li:hover {
  opacity: 0.9;
}
@media screen and (max-width: 768px) {
  .layadmin-user-login {
    padding-top: 60px;
  }
  .layadmin-user-login-main {
    width: 300px;
  }
  .layadmin-user-login-box {
    padding: 10px;
  }
}
</style>